<template>
    <div id="home" class="home">
        <banner isHome="true"></banner>
        <div class="site-content animate">
            <!--通知栏-->
            <div class="notify">
                <div class="search-result" v-if="hideSlogan">
                    <span v-if="searchWords">搜索结果："{{ searchWords }}" 相关文章</span>
                    <span v-else-if="category">分类 "{{ category.name }}" 相关文章</span>
                </div>
                <quote v-else>{{ notice }}</quote>
            </div>

            <!--焦点图-->
            <!-- <div class="top-feature" v-if="!hideSlogan">
                <section-title>
                    <div style="display: flex;align-items: flex-end;">聚焦<small-ico></small-ico>
                    </div>
                </section-title>
                <div class="feature-content">
                    <div class="feature-item" v-for="item in features" :key="item.title">
                        <Feature :data="item"></Feature>
                    </div>
                </div>
            </div> -->

            <!--文章列表-->
            <main class="site-main" :class="{ search: hideSlogan }">
                <section-title v-if="!hideSlogan">推荐</section-title>
                <template v-for="item in postList">
                    <post :post="item" :key="item.id"></post>
                </template>
            </main>

            <!--加载更多-->
            <div class="more" v-show="hasNextPage">
                <div class="more-btn" @click="loadMore">More</div>
            </div>
        </div>
    </div>
</template>

<script>
    import Banner from "@/components/banner";
    import Feature from "@/components/feature";
    import sectionTitle from "@/components/section-title";
    import Post from "@/components/post";
    import SmallIco from "@/components/small-ico";
    import Quote from "@/components/quote";
    import { fetchPostList, fetchArtListByCid, fetchCategoryDetail, searchArticle } from "../api";

    export default {
        name: "Home",
        props: ["cid", "words"],
        data() {
            return {
                features: [],
                postList: [],
                currPage: 1,    // 当前页
                perPage: 7,    // 每页数量
                hasNextPage: false,
                category: null,
                notice: "欢迎访问 ※听雨※ 的个人博客"
            };
        },
        components: {
            Banner,
            Feature,
            sectionTitle,
            Post,
            SmallIco,
            Quote,
        },
        // 计算属性
        computed: {
            searchWords() {
                return this.$route.params.words;
            },
            hideSlogan() {
                return this.category || this.searchWords;
                // return this.searchWords;
            },
            // notice() {
            //     return this.$store.getters.notice;
            // },
        },
        //生命周期 - 创建完成（访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（访问DOM元素）
        mounted() {
            // console.log("this.cid: " + this.cid);
            if (this.cid) {
                this.getCateDetail();
                this.getArtListByCid();
            } else if (this.words) {
                this.searchArticle();
            }
            else {
                this.fetchPostList();
            }
            // this.fetchFocus();
        },
        methods: {
            // 首页推荐文章列表
            fetchPostList() {
                fetchPostList(this.currPage, this.perPage)
                    .then((res) => {
                        // console.log(res.data.data);
                        this.postList = res.data.data || [];
                        this.currPage = res.data.currPage;
                        this.hasNextPage = res.data.hasNextPage;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },

            // 加载更多
            loadMore() {
                fetchPostList({ page: this.currPage + 1 }).then((res) => {
                    this.postList = this.postList.concat(res.data.data || []);
                    this.currPage = res.data.currPage;
                    this.hasNextPage = res.data.hasNextPage;
                });
            },

            // 通过分类id获取文章列表
            getArtListByCid() {
                // this.$axios.get(`/category/${this.cid}`).then(res => {
                //     // console.log(res.data.data.data);
                //     this.postList = res.data.data.data || [];
                // });
                fetchArtListByCid(this.cid)
                    .then((res) => {
                        // console.log(res.data.data);
                        this.postList = res.data.data || [];
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },

            // 获取当前分类信息
            getCateDetail() {
                fetchCategoryDetail(this.cid)
                    .then((res) => {
                        this.category = res.data.data || [];
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            // 搜索文章
            searchArticle() {
                searchArticle(this.words)
                    .then((res) => {
                        this.postList = res.data.data || [];
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }


            // 聚焦
            // fetchFocus() {
            //     fetchFocus().then(res => {
            //         this.features = res.data.data || [];
            //     }).catch(err => {
            //         console.log(err);
            //     });
            // },
        },

    };
</script>
<style scoped lang="less">
    .site-content {
        .notify {
            margin: 60px 0;
            border-radius: 3px;

            &>div {
                padding: 20px;
            }
        }

        .search-result {
            padding: 15px 20px;
            text-align: center;
            font-size: 20px;
            font-weight: 400;
            border: 1px dashed #ddd;
            color: #828282;
        }
    }

    .top-feature {
        width: 100%;
        height: auto;
        margin-top: 30px;

        .feature-content {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            position: relative;

            .feature-item {
                width: 32.9%;
            }
        }
    }

    .site-main {
        min-height: 520px;
        /* padding-top: 80px; */
        padding-top: unset;

        &.search {
            padding-top: 0;
        }
    }

    .more {
        margin: 50px 0;

        .more-btn {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #adadad;
            border: 1px solid #adadad;
            border-radius: 20px;
            margin: 0 auto;
            cursor: pointer;

            &:hover {
                color: #8fd0cc;
                border: 1px dashed #8fd0cc;
            }
        }
    }

    /******/
    @media (max-width: 800px) {
        .top-feature {
            display: none;
        }

        .site-main {
            padding-top: 40px;
        }

        .site-content {
            .notify {
                margin: 30px 0 0 0;
            }

            .search-result {
                margin-bottom: 20px;
                font-size: 16px;
            }
        }
    }

    /******/
</style>